<!-- MyFansPage.vue -->
<template>
  <UserRelationList title="我的粉丝" backPath="/user" :userList="fansList" :pageNum="pageNum"
    @handleItem="handleFanFollow" />
</template>

<script setup>
import UserRelationList from '@/components/common/UserRelationList.vue'
import { \ } from "@/api/user/user"; // 粉丝列表的API
import { useUserStore } from "@/store/modules/user/user";
import { triggerFanFollowAPI } from "@/api/message/message"; // 粉丝列表的关注API（可能和关注列表不同，也可能相同）
import { getCurrentInstance, ref, onMounted } from 'vue'

const { proxy } = getCurrentInstance()
const userStore = useUserStore()
const userId = userStore.userInfo.userId
const fansList = ref([])
const pageNum = ref(1)

// 获取粉丝列表数据
async function getFansList() {
  const res = await getFansAPI(userId, pageNum.value) // 调用粉丝API
  console.log(res);
  
  if (res.code === 200) {
    fansList.value = res.data
  }
}

// 处理粉丝的关注/取消关注（父组件负责API调用）
async function handleFanFollow({ item, newStatus }) {
  try {
    // 调用粉丝相关的关注接口（可能和关注列表相同，也可能不同）
    const res = await triggerFanFollowAPI(userId, item.userId)
    if (res.code === 200) {
      // 更新本地数据
      const index = fansList.value.findIndex(i => i.userId === item.userId)
      if (index > -1) {
        fansList.value[index].bothStatus = newStatus
      }
      proxy.$toast({ message: '操作成功', type: 'success' })
    }
  } catch (error) {
    console.log(error)
    proxy.$toast({ message: '操作失败', type: 'error' })
  }
}

onMounted(() => {
  getFansList()
})
</script>